<template>
    <div id="searchContent">
      <div class="class" v-if="currContent==='class'">
        <ul class="user-items">
          <li class="user-item">
            <div class="user-info">
              <div class="user-about">
                <p class="username">淋花吧</p>
                <p class="user-introduce">所属学科分类：<span>是真的钱dddddddddddddddddddddddddddddddddddddddddd</span></p>
              </div>
            </div>
            <div class="user-related">
              <p class="fans">关注人数：<span>250</span></p>
              <p class="follow-button is-follow">已关注</p>
            </div>
          </li>
          <li class="user-item">
            <div class="user-info">
              <div class="user-about">
                <p class="username">淋花吧</p>
                <p class="user-introduce">个人介绍：<span>是真的钱</span></p>
              </div>
            </div>
            <div class="user-related">
              <p class="fans">粉丝：<span>250</span></p>
              <p class="follow-button is-follow">已关注</p>
            </div>
          </li>
          <li class="user-item">
            <div class="user-info">
              <div class="user-about">
                <p class="username">淋花吧</p>
                <p class="user-introduce">个人介绍：<span>是真的钱</span></p>
              </div>
            </div>
            <div class="user-related">
              <p class="fans">粉丝：<span>250</span></p>
              <p class="follow-button not-follow">+关注</p>
            </div>
          </li>
          <li class="user-item">
            <div class="user-info">
              <div class="user-about">
                <p class="username">淋花吧</p>
                <p class="user-introduce">个人介绍：<span>是真的钱</span></p>
              </div>
            </div>
            <div class="user-related">
              <p class="fans">粉丝：<span>250</span></p>
              <p class="follow-button not-follow">+关注</p>
            </div>
          </li>
          <li class="user-item">
            <div class="user-info">
              <div class="user-about">
                <p class="username">淋花吧</p>
                <p class="user-introduce">个人介绍：<span>是真的钱</span></p>
              </div>
            </div>
            <div class="user-related">
              <p class="fans">粉丝：<span>250</span></p>
              <p class="follow-button is-follow">已关注</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="post" v-if="currContent==='post'">
        <div class="post-content-title">
          <span>排序结果：</span>
          <ul>
            <!-- time -->
            <li>按时间排序</li>
            <li>|</li>
             <!-- like_number -->
            <li>按点赞数排序</li>
            <li>|</li>
            <!--  -->
            <li>按收藏人数排序</li>
            <li>|</li>
            <li>按回复量排序</li>
          </ul>
        </div>
        <div class="content">
          <!-- 帖子的展示列表  根据数据动态渲染中间需要一个过度数据 -->
          <ul class="post-items">
            <li class="post-item">
              <img class="post-user-head" src="../../../../../assets/img/user/userHead.png" alt="用户头像">
              <div class="post-item-content">
                <div class="post-describe">
                  <span class="username">username</span>
                  <span class="time">2017-12-12</span>
                  <span class="class">前端·后端</span>
                </div>
                <div class="post-title">前端进阶：React 企业管理系统开发指南</div>
                <div class="user-action">
                  <span class="like iconfont icon-zan1">12</span><span class="iconfont icon-pinglun commentsNum">32</span>
                </div>
              </div>
            </li>
            <li class="post-item">
              <img class="post-user-head" src="../../../../../assets/img/user/userHead.png" alt="用户头像">
              <div class="post-item-content">
                <div class="post-describe">
                  <span class="username">username</span>
                  <span class="time">2017-12-12</span>
                  <span class="class">前端·后端</span>
                </div>
                <div class="post-title">前端进阶：React 企业管理系统开发指南</div>
                <div class="user-action">
                  <span class="like iconfont icon-zan1">12</span><span class="iconfont icon-pinglun commentsNum">32</span>
                </div>
              </div>
            </li>
            <li class="post-item">
              <img class="post-user-head" src="../../../../../assets/img/user/userHead.png" alt="用户头像">
              <div class="post-item-content">
                <div class="post-describe">
                  <span class="username">username</span>
                  <span class="time">2017-12-12</span>
                  <span class="class">前端·后端</span>
                </div>
                <div class="post-title">前端进阶：React 企业管理系统开发指南</div>
                <div class="user-action">
                  <span class="like iconfont icon-zan1">12</span><span class="iconfont icon-pinglun commentsNum">32</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="user" v-if="currContent==='user'">
        <ul class="user-items">
          <li class="user-item">
             <div class="user-info">
               <div class="user-head">
                 <img src="../../../../../assets/img/user/userHead.png" alt="用户头像">
               </div>
               <div class="user-about">
                 <p class="username">淋花吧</p>
                 <p class="user-introduce">个人介绍：<span>是真的钱dddddddddddddddddddddddddddddddddddddddddd</span></p>
               </div>
             </div>
            <div class="user-related">
              <p class="fans">粉丝：<span>250</span></p>
              <p class="follow-button is-follow">已关注</p>
            </div>
          </li>
          <li class="user-item">
            <div class="user-info">
              <div class="user-head">
                <img src="../../../../../assets/img/user/userHead.png" alt="用户头像">
              </div>
              <div class="user-about">
                <p class="username">淋花吧</p>
                <p class="user-introduce">个人介绍：<span>是真的钱</span></p>
              </div>
            </div>
            <div class="user-related">
              <p class="fans">粉丝：<span>250</span></p>
              <p class="follow-button is-follow">已关注</p>
            </div>
          </li>
          <li class="user-item">
            <div class="user-info">
              <div class="user-head">
                <img src="../../../../../assets/img/user/userHead.png" alt="用户头像">
              </div>
              <div class="user-about">
                <p class="username">淋花吧</p>
                <p class="user-introduce">个人介绍：<span>是真的钱</span></p>
              </div>
            </div>
            <div class="user-related">
              <p class="fans">粉丝：<span>250</span></p>
              <p class="follow-button not-follow">+关注</p>
            </div>
          </li>
          <li class="user-item">
            <div class="user-info">
              <div class="user-head">
                <img src="../../../../../assets/img/user/userHead.png" alt="用户头像">
              </div>
              <div class="user-about">
                <p class="username">淋花吧</p>
                <p class="user-introduce">个人介绍：<span>是真的钱</span></p>
              </div>
            </div>
            <div class="user-related">
              <p class="fans">粉丝：<span>250</span></p>
              <p class="follow-button not-follow">+关注</p>
            </div>
          </li>
          <li class="user-item">
            <div class="user-info">
              <div class="user-head">
                <img src="../../../../../assets/img/user/userHead.png" alt="用户头像">
              </div>
              <div class="user-about">
                <p class="username">淋花吧</p>
                <p class="user-introduce">个人介绍：<span>是真的钱</span></p>
              </div>
            </div>
            <div class="user-related">
              <p class="fans">粉丝：<span>250</span></p>
              <p class="follow-button is-follow">已关注</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="none" v-if="currContent==='none'">
        <p>列表为空，请重新搜索！！！</p>
      </div>
    </div>
</template>

<script>
  export default {
    name: 'searchContent',
    propos : {
      isLogin : {
        default : false,
        type : Boolean
      }
    },
    data () {
      return {
        // 根据该数据显示 post, class, user, none
        currContent: this.$route,
      }
    },
    // 因为这里是在
    created(){
      let _this = this;
      _this.currContent = _this.$route.params.classify;
    },
   mounted() {
   },
    beforeRouteUpdate(to, from, next) {
      this.currContent = to.params.classify;
      next();
    },
  }
</script>

<style scoped>

/*<!-- post -->*/
@import '../../../../../assets/css/postItem.css';
@import '../../../../../assets/css/classItems.css';
#searchContent {
  float: right;
  background-color: white;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
  /*////////////////////////////////////////////////////*/
  /* class开始 */

  /* class开始 */

  /*////////////////////////////////////////////////////*/
  /* post开始 */
  .post-content-title {
    height: 40px;
    border-bottom: 1px solid #e0e1e2;
    font: 14px/40px "Microsoft YaHei",sans-serif;
    padding-left: 20px;
  }

  .post-content-title span,ul {
    float: left;
  }
  .post-content-title ul {
    overflow: hidden;
  }
  .post-content-title ul li {
    float: left;
    font-size: 12px;
    color: #71777c;
  }
  .post-content-title ul li:nth-child(even) {
    margin: 0 5px;
  }
  .post-content-title ul li:nth-child(odd):hover {
    color: #000;
    cursor: pointer;
  }
  /* post结束 */

  /*////////////////////////////////////////////////////*/
  /* class开始 */
    .class .user-item{
      padding-left: 50px;
    }
  /* class结束 */

  /*////////////////////////////////////////////////////*/
  /* none开始 */
  .none p {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    width: 100%;
    height: 100px;
    background-color: white;
    font: 18px/100px "Microsoft YaHei",sans-serif;
    text-align: center;
  }
  /* none结束 */
</style>
